<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/underscore.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>
</head>
<body>
    <ul id="aView">

    </ul>
</body>
<script>
  var list = [
      {
          title:'title1',
          decriptton:'decriptton1'
      },
      {
          title:'title2',
          decriptton:'decriptton2'
      },
      {
          title:'title3',
          decriptton:'decriptton1'
      }
  ];
  var Mylist = Backbone.Model.extend({

  });

  var $alist = new Mylist(list);

  var ItemView = Backbone.View.extend({
        tagName:'li',
        className:'list-item',
        render:function(){
            this.$el.html(this.model.get('title'));
            return this;
        }
  });
  var ListView = Backbone.View.extend({
      initialize:function(){

         if(this.collection) {
             console.log(this.collection)
             this.byId = {};
             this.views = [];
             this.collection.each(this.registerView, this);
           //  this.listenTo(this.collection, 'reset', this.resetrView)
             this.listenTo(this.collection, 'add', this.addView)
//             this.listenTo(this.collection, 'remove', this.removeView)
//             this.listenTo(this.collection, 'change', this.updateView)
//             this.listenTo(this.collection, 'sort', this.resetView)
         }
      },
      registerView : function(model){

        var view = new ItemView({
            model:model
        })
        this.byId[model.cid] = view;
        this.views.push(view)

      },
      addView:function(model){
         var view = new ItemView({
             model:model
         })
         var at = this.collection.indexOf(model);
         this.byId[model.cid] = view;
          $before = this.views[at-1].$el;
         $before.after(view.render().$el);
          this.views.splice(at,0,view);

      },
      render:function(){
          var _this = this;
          this.$el.empty();
          _.each(this.views,function(view){
              $_el = view.render().$el;
              _this.$el.append($_el);
              return this;
          })
      }

  });

  var aView = new ListView({
      el:'#aView',
      collection:$alist
  });

  aView.render();
  aView.add({
      title:'新添加标题',
      description:'新添加描述'
  },{at:3})

</script>
</html>